<template>
  <div class="result-container">
    <div class="flex-column align-center flex-1">
      <div class="flex-column align-center flex-1">
        <div ref="capture">
          <img src="../assets/02/logo.png" class="icon-logo" />
          <div class="share-box flex-column align-center">
            <div class="text-white font18">此刻心跳</div>
            <div class="text-white font18">为 {{ heatBeatName }} 而动</div>
            <div style="height: 16vh;" class="d-flex align-center over-hidden">
              <img style="width: 100%;" :src="heatBeatType.img" />
            </div>
            <img src="../assets/02/heart-word.png" style="width: 8vh" />
          </div>
        </div>
        <div class="d-flex flex-row">
          <img
            src="../assets/06/download.png"
            class="img-btn"
            @click="generatorImage"
          />
          <img
            @click="showShareGuide = true"
            src="../assets/06/showother.jpg"
            class="img-btn"
          />
        </div>
      </div>
      <div style="margin-bottom: 1rem;">
        <img src="../assets/06/pattern.png" class="dec-pattern" />
        <div>
          <img class="q-tip" src="../assets/06/tip.png" />
          <div class="d-flex flex-row justify-center" style="margin-top: 20px;">
            <img class="icon-qcode" src="../assets/06/qcode-mp.jpg" />
            <img class="icon-airpods" src="../assets/06/airpods.png" />
          </div>
        </div>
      </div>
    </div>
    <Popup
      v-model="showSavePreview"
      style="background-color: #000;overflow: visible;height: 80vw;"
      class="d-flex flex-column justify-center"
    >
      <div style="width: 80vw;height: 75vw;" class="download-preview">
        <img :src="canvasImg" style="width: 100%;" />
      </div>
      <div class="tip-text">长按保存图片</div>
    </Popup>
    <Popup
      v-model="showShareGuide"
      style="background-color: transparent;top: 20%;"
    >
      <img src="../assets/06/guide.jpg" style="width: 5rem;" />
    </Popup>
  </div>
</template>
<script>
import html2canvas from "html2canvas";
import { Popup } from "vant";
const Items = [
  {
    name: "热恋中",
    img: require("../assets/05/heart-beat-hot.gif")
  },
  {
    name: "恋人未满中",
    img: require("../assets/05/heart-beat-beyond.gif")
  },
  {
    name: "稳定恋爱中",
    img: require("../assets/05/heart-beat-stable.gif")
  }
];
export default {
  components: {
    Popup
  },
  props: {
    result: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      heatBeatName: "",
      canvasImg: "",
      heatBeatType: {},
      showSavePreview: false,
      showShareGuide: false
    };
  },
  created() {
    this.heatBeatName = this.result.name;
    this.heatBeatType = Items[this.result.beattype || 0];
  },
  methods: {
    generatorImage() {
      html2canvas(this.$refs.capture, {
        backgroundColor: "#000000",
        scale: window.devicePixelRatio
      }).then(canvas => {
        this.canvasImg = canvas.toDataURL("image/png", 1.0);
        this.showSavePreview = true;
      });
    }
  }
};
</script>
<style scoped>
.result-container {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  background: #000000;
}
.share-box {
  margin-top: 1rem;
  margin-bottom: 0.3rem;
  display: flex;
  flex: 1;
  flex-direction: column;
}
.text-white {
  color: #ffffff;
}
.icon-logo {
  width: 1.16rem;
  margin-top: 0.4rem;
}
.icon-qcode {
  width: 2.22rem;
  height: 2rem;
  margin-left: -0.2rem;
}
.icon-airpods {
  width: 1.58rem;
  height: 2rem;
  margin-left: 1.6rem;
}
.dec-pattern {
  width: 100%;
  margin-bottom: 12px;
  margin-top: 20px;
}
.font18 {
  font-size: 0.36rem;
  line-height: 0.6rem;
}
.img-btn {
  width: 1.74rem;
  height: 1.43rem;
}
.download-preview {
  box-shadow: 0 2px 8px 0 rgba(199, 179, 139, 0.2);
  margin: 3px;
}
.tip-text {
  color: #fff;
  position: absolute;
  top: -1rem;
  left: 0;
  right: 0;
}
.q-tip {
  width: 4.02rem;
  height: 1.6rem;
}
</style>
